<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../../tpl/head.jsp"%>
<style>
    .layui-form-item .layui-input-inline{width: 290px;}
    form{
        padding: 20px;
    }
</style>
<form class="layui-form" action="">
    <div class="layui-form-item">
      <label class="layui-form-label">名称</label>
      <div class="layui-input-block">
        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">验证必填项</label>
      <div class="layui-input-block">
        <input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">
      </div>
    </div>
    
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">主题</label>
        <div class="layui-input-inline">
              <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">标签</label>
        <div class="layui-input-inline">
          <input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    
    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">发件人</label>
        <div class="layui-input-inline">
          <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
        </div>
      </div>
      <div class="layui-inline">
        <label class="layui-form-label">收件人</label>
        <div class="layui-input-inline">
            <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">抄送人</label>
          <div class="layui-input-inline">
            <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">邮件箱</label>
          <div class="layui-input-inline">
            <select name="modules" lay-verify="required" lay-search="">
                <option value="">直接选择或搜索选择</option>
                <option value="1">layer</option>
                <option value="2">form</option>
                <option value="3">layim</option>
              </select>
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">正文</label>
          <div class="layui-input-inline">
            <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">业务员</label>
          <div class="layui-input-inline">
              <input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">范围</label>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_min" placeholder=" " autocomplete="off" class="layui-input">
          </div>
          <div class="layui-form-mid">-</div>
          <div class="layui-input-inline" style="width: 100px;">
            <input type="text" name="price_max" placeholder=" " autocomplete="off" class="layui-input">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">附件</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="不限" checked="">
            <input type="radio" name="sex" value="女" title="含">
            <input type="radio" name="sex" value="禁" title="不含">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">我的回复</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="不限" checked="">
            <input type="radio" name="sex" value="女" title="含">
            <input type="radio" name="sex" value="禁" title="不含">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">转发状态</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="不限" checked="">
            <input type="radio" name="sex" value="女" title="含">
            <input type="radio" name="sex" value="禁" title="不含">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">阅读状态</label>
          <div class="layui-input-inline">
            <input type="radio" name="sex" value="男" title="不限" checked="">
            <input type="radio" name="sex" value="女" title="含">
            <input type="radio" name="sex" value="禁" title="不含">
          </div>
        </div>
      </div>
    
  </form>
  <%@ include file="../../tpl/foot.jsp"%>
  <script>
  layui.use(['form', 'layedit', 'laydate'], function(){
    var form = layui.form
    ,layer = layui.layer
    ,layedit = layui.layedit
    ,laydate = layui.laydate;
    
    //日期
    laydate.render({
      elem: '#date'
    });
    laydate.render({
      elem: '#date1'
    });
    
    //创建一个编辑器
    var editIndex = layedit.build('LAY_demo_editor');
   
    //自定义验证规则
    form.verify({
      title: function(value){
        if(value.length < 5){
          return '标题至少得5个字符啊';
        }
      }
      ,pass: [
        /^[\S]{6,12}$/
        ,'密码必须6到12位，且不能出现空格'
      ]
      ,content: function(value){
        layedit.sync(editIndex);
      }
    });
    
    //监听指定开关
    form.on('switch(switchTest)', function(data){
      layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
        offset: '6px'
      });
      layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
    });
    
    //监听提交
    form.on('submit(demo1)', function(data){
      layer.alert(JSON.stringify(data.field), {
        title: '最终的提交信息'
      })
      return false;
    });
   
    //表单赋值
    layui.$('#LAY-component-form-setval').on('click', function(){
      form.val('example', {
        "username": "贤心" // "name": "value"
        ,"password": "123456"
        ,"interest": 1
        ,"like[write]": true //复选框选中状态
        ,"close": true //开关状态
        ,"sex": "女"
        ,"desc": "我爱 layui"
      });
    });
    
    //表单取值
    layui.$('#LAY-component-form-getval').on('click', function(){
      var data = form.val('example');
      alert(JSON.stringify(data));
    });
    
  });
  </script>